<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Vue{{}}的使用</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 
	数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
	不仅可以绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
	用法：{{js表达式}}
-->
  <div id="app">
    <h1>用户名：{{uname}}</h1>
    <h3>性别：{{sex==1?"男":"女"}}</h2>
      <h3>下单时间：{{new Date(orderTime).toLocaleString()}}</h2>
        <h3>数量：{{count}}</h2>
          <h3>单价：{{price.toFixed(2)}}</h2>
            <h2>小计：${{(price * count).toFixed(2)}}
          </h3>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        uname: "dingding",
        sex: 1,
        orderTime: 1587959581823,
        price: 12.5,
        count: 5,
        //将来这些值都可以来自于ajax请求
      },
    });
  </script>
</body>

</html>